<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
import { debounce } from '@/utils'

export default {
    name: 'App',
    data() {
        return {
            inTertime: null
        }
    },
    created() {
        this.getTime()
        this.inTertime = setInterval(() => {
            this.getTime()
        }, 1000)
    },
    mounted() {
        this.setHtmlFontSize()
        this.__resizeHandler = debounce(() => {
            this.setHtmlFontSize()
        }, 40)
        window.addEventListener('resize', this.__resizeHandler)
    },
    beforeDestroy() {
        clearInterval(this.inTertime)
    },
    methods: {
        setHtmlFontSize() {
            const html = document.getElementsByTagName('html')[0]
            const clientW =
        document.documentElement.clientWidth || document.body.clientWidt
            const clientH =
        document.documentElement.clientHeight || document.body.clientHeight
            if (clientW / clientH <= 16 / 7.5) {
                if (clientW > 900) {
                    html.style.fontSize = clientW / 120 + 'px'
                    this.$store.dispatch('fontSize', clientW / 120)
                }
            } else {
                if (clientH > 450) {
                    html.style.fontSize = clientH / 60 + 'px'
                    this.$store.dispatch('fontSize', clientH / 60)
                }
            }
        },
        getTime() {
            this.$store.state.common.realTime = this.$moment().format('YYYY-MM-DD A:HH:mm:ss')
        },
        getweek: function(e) {
            var week = ['一', '二', '三', '四', '五', '六', '日']
            return week[e - 1]
        }
    }
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variables";

#app {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  background: $colorBgMain;
  color: $colorTextMain;
  user-select: none;
//   background-image: radial-gradient(gray, #0A0C07, #0D0F0A);
opacity: 1;
// padding: 0 10px 10px;

}
</style>

